<template>
    <div class="list-selection-warp">
        <div class="title">
            <h3>{{title}}</h3>
        </div>
        <div class="list-selec-data">
            <div class="selec" :class="{'show':val.show}" v-for="(val,key) in myList" :key="key" v-if="val.child">
                <div class="selec-title" @click="listShow(val)">
                    <span class="more-hide"><i class="icon"></i>{{val.name}}</span>
                    <span>{{val.child.length}}</span>
                </div>
                <ul>
                    <li v-for="(v,k) in val.child" :key="'li'+k" @click="liClick(v,val)">{{v.memberName}}</li>
                </ul>
            </div>

        </div>

    </div>
</template>
<script>
/**
 * 功能 列表选择组件 需要传两个属性 title 标题
 * list 列表数据 数据格式为 [{name: '上海分公司', show: false, child: [{memberName: '我是测试'}, {memberName: '我是测试'}, {memberName: '我是测试'}]}]
 * list 里面的show属性是必填，用来控制当前列表是否显示子列表
 * liClick 为点击选中事件，会把选中的数据对像返回以及父列表的整个数据返回
 * search 方法为搜索，如果没有任何结果为返回false
 * @Author: lizuping
 * @Date: 2018-00-00
 * @Last Modified by: lizuping
 * @Last Modified time: 2018-07-24 14:46:58
 */
export default {
    name: 'listSelection',
    data () {
        return {
            myList: []
        };
    },
    // 数据接口 type:String Number Boolean Function Object Array Symbol
    props: {
        title: {
            type: String,
            default () {
                return '标题';
            }
        },
        list: {
            type: Array,
            default () {
                return [{name: '上海分公司', show: false, child: [{memberName: '我是测试3'}, {memberName: '我是测试1'}, {memberName: '我是测试2'}]}];
            }
        }
    },
    watch: {
        list () {
            this.myList = this.list;
        }
    },
    created () {
        this.myList = this.list;
    },
    methods: {
        search (key) {
            let temp = [];
            if (key) {
                let n = this.myList.length;
                for (let i = 0;i < n;i++) {
                    let obj = {show: true, name: '', child: []};
                    let nl = this.myList[i].child.length;
                    for (let k = 0;k < nl;k++) {
                        if (this.myList[i].child[k].memberName.search(key) > -1) {
                            obj.name = this.myList[i].name;
                            obj.child.push(this.myList[i].child[k]);
                        }
                    }
                    if (obj.child.length > 0) {
                        temp.push(obj);
                    }
                }
                if (temp.length > 0) {
                    this.myList = temp;
                    return true;
                } else {
                    return false;
                }
            } else {
                this.myList = this.list;
            }
        },
        listShow (data) {
            data.show = !data.show;
        },
        liClick (data, parent) {
            this.$emit('liClick', data, parent);
        }

    }
};
</script>
<style>
.list-selection-warp .icon {
    border: 0.16rem solid transparent;
    border-left: 0.16rem solid #95989f;
    display: block;
    height: 0;
    position: absolute;
    left: 0;
    top: 0.27rem;
    transform-origin: 0.06rem 0.14rem;
}
.list-selec-data {
    padding-left: 0.3rem;
}
.list-selec-data .selec {
    border-bottom: 1px solid #dddee3;
}
.list-selec-data .selec li {
    border-top: 1px solid #dddee3;
    padding-left: 0.5rem;
    height: 0.88rem;
    line-height: 0.88rem;
    color: #000;
    font-size: 0.3rem;
}
.selec .selec-title .more-hide{float: left;width: 80%;white-space: nowrap;text-overflow: ellipsis;overflow:hidden;}
.selec .selec-title span {
    float: right;
    padding-right: 0.3rem;
}
.selec .selec-title {
    position: relative;
    padding-left: 0.24rem;
    height: 0.88rem;
    line-height: 0.88rem;
    color: #000;
    font-size: 0.3rem;
}
.list-selection-warp .title {
    height: 0.6rem;
    background-color: #f2f2f4;
    padding-left: 0.3rem;
    padding-top: 0.3rem;
}
.list-selection-warp .title h3 {
    height: 0.3rem;
    line-height: 0.3rem;
    font-size: 0.3rem;
    color: #010101;
    padding-left: 0.12rem;
    border-left: 0.06rem solid #3397ff;
}
.list-selection-warp ul{height: 0px;overflow: hidden;}
.selec.show ul{height: auto;}
.selec.show .icon{transform: rotate(90deg)}
</style>
